// web/src/app/learn/(dashboard)/(routes)/teacher/create/page.tsx
'use client';
import React from 'react';
import {useForm} from "react-hook-form";
import {zodResolver} from "@hookform/resolvers/zod";
import * as z from 'zod'
import {Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage} from "@/components/ui/form";
import {Input} from "@/components/ui/input";
import Link from "next/link";
import {Button} from "@/components/ui/button";
import {useRouter} from "next/navigation";
import toast from 'react-hot-toast'
import {formSchema} from "@/app/learn/(dashboard)/(routes)/teacher/create/_schema";

const Page = () => {
    const router = useRouter()

    const form = useForm<z.infer<typeof formSchema>>({
        resolver: zodResolver(formSchema),
        defaultValues: {
            title: ''
        }
    })

    const {isSubmitting, isValid} = form.formState
    const onSubmit = async (values: z.infer<typeof formSchema>) => {
        try {
            const res = await fetch(`/api/course`, {
                method: "POST",
                body: JSON.stringify(values),
                headers: {
                    "Content-Type": "application/json"
                }
            })
            if (!res.ok) throw new Error(`failed fetch`)
            const data = await res.json()
            router.push(`/learn/teacher/courses/${data.id}`)
            toast.success(`创建成功`)
        } catch (err) {
            toast.error(`Something went wrong`)
            console.error('Something went wrong', err);
        }
    }

    return (
        <div className={`max-w-5xl mx-auto flex md:items-center md:justify-center h-full p-6`}>
            <div>
                <h1 className={`text-2xl`}>
                    Name your course
                </h1>
                <p className={`text-sm text-slate-600`}>
                    What would you like to name your course? Don&apos;t worry, you can change this later.
                </p>
                <Form {...form}>
                    <form
                        onSubmit={form.handleSubmit(onSubmit)}
                        className={`space-y-8 mt-8`}
                    >
                        <FormField
                            control={form.control}
                            render={({field}) => (
                                <FormItem>
                                    <FormLabel>
                                        Course title
                                    </FormLabel>
                                    <FormControl>
                                        <Input
                                            disabled={isSubmitting}
                                            placeholder="e.g. 'Advanced web development'"
                                            {...field}
                                        />
                                    </FormControl>
                                    <FormDescription>
                                        What will you teach in this course?
                                    </FormDescription>
                                    {/*提示字段校验结果*/}
                                    <FormMessage/>
                                </FormItem>
                            )}
                            name={`title`}
                        />
                        <div className={`flex items-center gap-x-2`}>
                            <Link href={`/learn`}>
                                <Button
                                    type={'button'}
                                    variant={'ghost'}
                                >
                                    Cancel
                                </Button>
                            </Link>
                            <Button
                                type={'submit'}
                                disabled={isSubmitting || !isValid}
                            >
                                Continue
                            </Button>
                        </div>
                    </form>
                </Form>
            </div>
        </div>
    );
};

export default Page;